﻿@page "/datetimeranges"

<h3>DateTimeRange 日期时间段选择器</h3>

<h4>在同一个选择器里选择一段日期</h4>

<DemoBlock Title="基本功能" Introduction="以「日」为基本单位，选择一段时间" Name="Normal">
    <DateTimeRange @bind-Value="@DateTimeRangeValue1" OnConfirm="OnConfirm" />
    <BlockLogger @ref="DateLogger" class="mt-3" />
</DemoBlock>

<DemoBlock Title="数据双向绑定" Introduction="点击确认按钮时间选择框值与文本框值一致" Name="BindValue">
    <div class="row g-3">
        <div class="col-12 col-sm-6">
            <DateTimeRange @bind-Value="@DateTimeRangeValue2" />
        </div>
        <div class="col-12 col-sm-6">
            <div>
                @if (DateTimeRangeValue2.Start != DateTime.MinValue)
                {
                    <span>时间范围：</span> @DateTimeRangeValue2.Start.ToString("yyyy-MM-dd");
                }
                @if (DateTimeRangeValue2.End != DateTime.MinValue)
                {
                    <span> - </span> @DateTimeRangeValue2.End.ToString("yyyy-MM-dd");
                }
            </div>
        </div>
    </div>
</DemoBlock>

<DemoBlock Title="禁用" Introduction="设置 <code>IsDisabled</code> 属性值为 <code>true</code> 时，组件禁止输入" Name="Disabled">
	<div class="row g-3">
		<div class="col-12 col-sm-6">
			<DateTimeRange Value="@DateTimeRangeValue3" IsDisabled="@IsDisabled" />
		</div>
		<div class="col-12 col-sm-6">
			<Switch @bind-Value="@IsDisabled" />
		</div>
	</div>
</DemoBlock>

<DemoBlock Title="带快捷键侧边栏" Introduction="设置 <code>ShowSidebar</code> 属性值为 <code>true</code> 时，组件显示快捷方式侧边栏" Name="Sidebar">
    <p>通过设置 <code>ShowSidebar</code> 参数开启显示侧边栏快捷选项功能，通过设置 <code>SidebarItems</code> 参数集合替换组件内置的默认快捷项</p>
    <DateTimeRange Value="@DateTimeRangeValue4" ShowSidebar="true" />
</DemoBlock>

<DemoBlock Title="显示今天按钮" Introduction="设置 <code>ShowToday</code> 属性值为 <code>true</code> 时，组件下方显示今天快捷按钮" Name="Today">
    <p>点击 <code>今天</code> 按钮时，时间范围为 <code>yyyy-MM-dd 00:00:00 到 yyyy-MM-dd 23:59:59</code></p>
    <DateTimeRange Value="@DateTimeRangeValue4" ShowToday="true" />
</DemoBlock>

<DemoBlock Title="表单中使用" Introduction="将组件内置到 <code>ValidateForm</code> 中使用" Name="ValidateForm">
    <FormInlineSwitch @bind-Value="@FormRowType" class="mb-3"></FormInlineSwitch>
    <ValidateForm Model="@Model">
        <div class="@GroupFormClassString">
            <div class="col-12 col-sm-6">
                <DateTimePicker @bind-Value="@Model.DateTime" />
            </div>
            <div class="col-12 col-sm-6">
                <DateTimeRange @bind-Value="@DateTimeRangeValue4" ShowLabel="true" DisplayText="时间范围" />
            </div>
        </div>
    </ValidateForm>
</DemoBlock>

<AttributeTable Items="@GetAttributes()" />

<EventTable Items="@GetEvents()" />
